<script setup lang="ts">
import { defineProps } from 'vue'

defineOptions({
  name: 'ConfirmDialog'
})

// 定义 props
const props = defineProps<{
  title: string
  confirmText?: string
  cancelText?: string
  onConfirm: () => void
  onCancel: () => void
}>()

// 处理确认
const handleConfirm = () => {
  props.onConfirm()
}

// 处理取消（包括点击遮罩层）
const handleCancel = () => {
  props.onCancel()
}
</script>

<template>
  <div class="fixed inset-0 z-50 flex items-center justify-center">
    <!-- 遮罩层 -->
    <div class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm"></div>

    <!-- 对话框容器 -->
    <div class="relative bg-white w-full max-w-md rounded-lg shadow-xl overflow-hidden mx-4">
      <!-- 头部 -->
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800">{{ title }}</h3>
      </div>

      <!-- 内容插槽 -->
      <div class="p-4 pt-0 pb-6">
        <slot>默认内容，如果需要可以在调用时通过 slot 覆盖。</slot>
      </div>

      <!-- 底部按钮 -->
      <div class="p-2.5 bd-t flex justify-end space-x-3">
        <div
          @click="handleCancel"
          class="bd-1 cursor-pointer px-4 py-1 rounded-md text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        >
          {{ cancelText || '取消' }}
        </div>
        <div
          @click="handleConfirm"
          class="cursor-pointer px-4 py-1 rounded-md text-sm font-medium text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          {{ confirmText || '确定' }}
        </div>
      </div>
    </div>
  </div>
</template>
